<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="copyright" content="留学网">
<meta name="author" content="留学网">
<title>留学网</title>
<link rel="stylesheet" href="./static/css/element-ui.css">
<script src="./static/js/basic.js"></script>
<script type="text/javascript" src="./static/js/swiper-4.5.3.min.js"></script>
<link rel="stylesheet" href="./swiper/swiper.min.css" />
<script src="./static/js/element-ui.js"></script>
<script src="./static/js/js.js"></script>
<script src="./static/js/component.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body>
  <div v-cloak class="main zxb-home curNav1" id="app">
    <layout>
      <!-- banner -->
      <div id="banner">
        <div class="ov">
          <div class="swiper-wrapper">
            <div v-for="(item,index) in banner" :key="index" class="swiper-slide">
              <div class="imgW"><img :src="item.src" alt="" class="img"></div>
            </div>
          </div>
        </div>
        <div class="ban-dot"></div>
      </div>
      <!-- 地址 -->
      <div class="box">
        <div class="title"><span class="red">*</span>进货地址</div>
        <div class="select-main">
          <p class="m-tips">请选择要进货的门店</p>
          <div class="select-box" :class="{on: selectOpen}" @click="selectOpen = !selectOpen">
            <p class="tips">请选择 </p>
            <div class="input"></div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="title">总公司实际库存</div>
        <dl class="product-list">
          <dd v-for="(item, index) in list" class="item">
            <div class="imgW"><img :src="item.image_text" alt="" class="img"></div>
            <div class="name row2">{{item.title}}{{item.unit}}</div>
            <div class="div">
              <div class="bottom">
                <span class="price">￥{{item.price}}</span>
                <span class="kucun">库存{{item.stock}}件</span>
              </div>
              <div class="btn-box" :class="[item.number > 0 ? 'on' : 'no']">
                <template v-if="item.number > 0">
                  <span class="btn btn1" @click="jian(item)">-</span>
                  <input type="number" v-model="item.number" class="input">
                </template>
                <span class="btn btn2" @click="add(item)">+</span>
              </div>
            </div>
          </dd>
        </dl>
      </div>

      <div class="box" id="cartBottom">
        <my-cart :list="cartList" @add="add" @jian="jian"></my-cart>
      </div>
      <div v-if="cartList.length > 0" class="pup" :class="{on: showCart}">
        <div class="bg" @click="showCart = !showCart"></div>
        <div class="pup-box">
          <my-cart :list="cartList" @add="add" @jian="jian" @clearcart="clearcart" @close="showCart = false"></my-cart>
        </div>
      </div>

      <div class="home-bottom">
        <div class="div1">
          <p class="p1">共计</p>
          <div class="num" :class="{on: showCart}">
            <b class="red">{{cartList.length}}</b>
            <span class="sp">个商品</span>
            <img src="./static//image/jt2.png" class="jt" @click="showCart = !showCart" alt="">
          </div>
        </div>
        <div class="div2">应付（CNY）<b class="red">￥{{total_price}}</b></div>
      </div>
    </layout>
    
    <!-- 弹窗 -->
    <!-- <my-mask :visible.sync="showMask"></my-mask> -->

    
  </div>
  
  
  <script type="text/babel">
    var time = new Date().getTime()
    new Vue({
      el: '#app',
      components: {
        'my-cart': httpVueLoader('./components/cart.vue?time='+time),
      },
      data:{
        banner:[
          {src:'./static/image/banner.webp'}
        ],
        selectOpen:false,
        list:[],
        cartList:[],
        showCart:false,
        total_price1:'0.00'
        
      },
      created() {
          
        // jump()
      },
      mounted() {
        // 1.5秒后打开弹窗
        setTimeout(() => {
          this.showMask = true
        }, 1500);
        //banner
        var swiper = new Swiper('#banner .ov', {
          slidesPerView: 1,
          pagination: {
            el: '#banner .ban-dot',
            clickable: true,
          },
          autoplay:true
        });


        this.getList()
      },
      computed:{
        total_price(){
          let price = 0;
          for(let i = 0; i < this.cartList.length; i++){
            price = price + Number(this.cartList[i].total_price);
          }
          console.log('price-----------------',  price)
          return price.toFixed(2)
        }
      },
      methods: {
        
        getList(){
          getProductList({}, res=>{
            this.list = res.map(m=>{return {number:0,total_price:0, ...m}});
          })
        },
        
        add(item){
          console.log('aaa--------', item.number, item.number === 0);
          const _num = item.number === 0 ? item.selling_quantity : item.number+1;
          console.log('bbb---------', _num, item.number)
          this.getCartList(item.id, _num)
          
        },
        jian(item){
          const _num = item.number === item.selling_quantity ? 0 : item.number-1;
          if(_num == 0){
            const index = this.list.findIndex( n => n.id === item.id);
            this.list[index].number = 0;
            this.list[index].total_price = '0.00';
            this.cartList = this.list.filter( n => n.number > 0)
          }else{
            this.getCartList(item.id, _num)
          }
          
          
        },
        
        
        
        // 购物车加减
        clearcart(){
          for(let i = 0; i < this.list.length; i++){
            this.list[i].number = 0;
            this.list[i].total_price = '0.00'
          }
          this.cartList = [];
        },
        getCartList(id, _num){
          console.log('_num----', _num)
          const index = this.list.findIndex( n => n.id === id);
          getProductStockApi({product_id: id, number: _num },res=>{
            this.list[index].number = _num;
            this.list[index].total_price = res.price;
            this.cartList = this.list.filter( n => n.number > 0)
          })
        },
        
        
        
        getPrice(item){
          return (Number(item.price) * item.number).toFixed(2)
        },
      }
    })
  </script>
  
  <style>
    
  </style>
  
</body>
</html>